<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="vue.js"></script>
</head>

<body>
	<div id="app">
		{{msg}}<br />
		14个指令<br />
		11个生命周期<br />
		其中8个是每个vue实例,组件实例都具有的<br />
		<br />
		beforeCreate创建前<br />
		created创建完成<br />
		beforeMount挂载/编译前<br />
		mounted挂载/编译 完成<br />
		<br />
		当数据改变时执行<br />
		beforeUpdate数据更改前<br />
		updated 数据更改完成<br />
		<br />
		beforeDestroy实例销毁 前<br />
		destroyed实例销毁 完成<br />
		<br />
		而activated和deactivated只有和keep-alive连用时,才有<br />
		errorCaptured 当捕获一个来自 子孙 组件 的错误时被调用<br />
		所有的生命周期都是函数<br />


		vue生命周期最常用的是created,用于获取数据,

		created 阶段的优势是：请求时间比较早，页面 loading 时间相对较短；
		mounted 阶段的优势是：页面已经渲染完成，如果想请求之后进行 DOM 操作的话，必须在 mounted 阶段发起请求；

	</div>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				msg: "vue生命周期"
			},
			methods: {
				fn() {
					console.log("fn")
				}
			},
			computed: {

			},
			/*				beforeCreate:function(){
								console.log("创建前");
							}*/
			beforeCreate() {
				console.group("1.beforeCreate 创建前");
				console.log("this:", this);
				console.log("this.$el:", this.$el);
				console.log("this.$data:", this.$data);
				console.log("this.msg:", this.msg);
				console.log("this.fn:", this.fn);
				console.groupEnd();
			},
			created() {
				console.group("2.created 创建完成");
				console.log("this:", this);
				console.log("this.$el:", this.$el);
				console.log("this.$data:", this.$data);
				console.log("this.msg:", this.msg);
				console.log("this.fn:", this.fn);
				console.groupEnd();
			},
			beforeMount() {
				console.group("3.beforeMount 编译/挂载 前");
				console.log("this:", this);
				console.log("this.$el:", this.$el);
				console.log("this.$data:", this.$data);
				console.log("this.msg:", this.msg);
				console.log("this.fn:", this.fn);
				console.groupEnd();
			},
			mounted() {
				console.group("4.mounted 编译/挂载完成");
				console.log("this:", this);
				console.log("this.$el:", this.$el);
				console.log("this.$data:", this.$data);
				console.log("this.msg:", this.msg);
				console.log("this.fn:", this.fn);
				console.groupEnd();
			},
			beforeUpdate() {
				console.group("5.beforeUpdate 数据更新 前");
				console.log("this:", this);
				console.log("this.$el:", this.$el);
				console.log("this.$data:", this.$data);
				console.log("this.msg:", this.msg);
				console.log("this.fn:", this.fn);
				console.groupEnd();
			},
			updated() {
				console.group("6.updated 数据更新 完成");
				console.log("this:", this);
				console.log("this.$el:", this.$el);
				console.log("this.$data:", this.$data);
				console.log("this.msg:", this.msg);
				console.log("this.fn:", this.fn);
				console.groupEnd();
			},
			beforeDestroy() {
				console.group("7.beforeDestroy 实例销毁 前");
				console.log("this:", this);
				console.log("this.$el:", this.$el);
				console.log("this.$data:", this.$data);
				console.log("this.msg:", this.msg);
				console.log("this.fn:", this.fn);
				console.groupEnd();
			},
			destroyed() {
				console.group("8.destroyed 实例销毁 完成");
				console.log("this:", this);
				console.log("this.$el:", this.$el);
				console.log("this.$data:", this.$data);
				console.log("this.msg:", this.msg);
				console.log("this.fn:", this.fn);
				console.groupEnd();
			}
		});


		setTimeout(function () {
			app.msg = "哈哈,我改变了啊";
		}, 3000);

		setTimeout(function () {
			app.$destroy(); //销毁实例
		}, 6000);

		setTimeout(function () {
			app.msg = "我还能变吗";
		}, 9000);
	</script>
</body>

</html>